<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer {
            display: flex;
            width: 600px;
            height: 600px;
            background-color: chocolate;
            flex-wrap: nowrap;
            /*flex-direction: column;*/
            justify-content: space-around;
            align-items: center;
        }

        .inner {
            width: 150px;
            height: 150px;
            flex: 1;
            background-color: lightgreen;

        }
    </style>
</head>
<body>

<!--flex布局：
容器 display:flex
    flex-direction: ;修改主轴默认位置
     flex-wrap 换行？
     justify-content
     align-items
项目
     flex
-->

<div class="outer">
    <div class="inner" style="order: 5">1</div>
    <div class="inner" style="background-color: blueviolet;order: 1">2</div>
    <div class="inner" style="background-color: gold">3</div>
    <div class="inner" style="background-color: blueviolet">22222</div>
    <div class="inner" style="background-color: gold">3323</div>
<!--    <div class="inner" style="background-color: blueviolet">2</div>-->
<!--    <div class="inner" style="background-color: gold">3</div>-->
</div>
</body>
</html>